import { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router'
import '../../static/css/visitors/list.css'
// 引入ant
import { Form, Input, Button, Table, Select, DatePicker, Space, DatePickerProps, Pagination, Cascader, message, Popconfirm } from 'antd';
import type { TableRowSelection } from 'antd/lib/table/interface';
import type { ColumnsType } from 'antd/lib/table';
// 引入封装的接口
import Lists from '../../apis/visitors/list'
// 引入审核封装接口
import { audit } from '../../apis/visitors/audit'
const { Option } = Select;
// 定义规范
interface DataType {
    key?: React.Key;
    v_id?: number;
    page: number;
    pageSize: number;
    username?: string;
    mobile?: string;
    departmentname?: string;
    endtime?: any;
    addtime?: any;
    typename?: string;
    status?: string;
    is_send?: string;
    address?: string;
}


// 日期
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
};
// console.log(datas)

// 定义函数
var total = 0
const List: FC = (): JSX.Element => {
    const navigate = useNavigate()
    const cancel: any = (e: React.MouseEvent<HTMLElement>) => {
        console.log(e);
        message.error('Click on No');
    };
    // 封装审核
    const confirm: any = (e: React.MouseEvent<HTMLElement>) => {
        return async () => {
            const res: any = await audit({ v_id: e, isgree: 1 })
            if (res.code == '00000') {
                message.success('审核通过', 2);
                list()
            }
        }
    };
    // 定义跳转
    const toDetail=(id:any)=>{
        return ()=>{
            // console.log(id)
            navigate('/table/detail/'+id)

        }
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '用户名',
            dataIndex: 'username',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
        },
        {
            title: '部门',
            dataIndex: 'departmentname',
        },
        {
            title: '进校时间',
            dataIndex: 'endtime',
        },
        {
            title: '离校时间',
            dataIndex: 'addtime',
        },
        {
            title: '人员类型',
            dataIndex: 'typename',
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (text: number) => (text == 3 ? <Button className='dd'>终审通过</Button> : <Button className='ee'>待初审</Button>)
        },
        {
            title: '是否离校',
            dataIndex: 'is_send',
            render: (text: number) => (text == 2 ? '否' : '是')
        },
        {
            title: '操作',
            dataIndex: 'status',
            render: (text: number, record: any) => (text == 3 ? <div><Button type='dashed' disabled id='status'>已审核</Button><Button type='primary' className='dea' onClick={toDetail(record.v_id)}>详情</Button></div> : <div>
                <Popconfirm
                    title="审核?"
                    onConfirm={confirm(record.v_id)}
                    onCancel={cancel}
                    okText="通过"
                    cancelText="拒绝"
                >
                    <Button type='primary' id='statu'>审核</Button>
                </Popconfirm><Button type='primary' className='dea'>详情</Button></div>)
        },
    ];


    
    const [params, setparams] = useState<DataType>({ page: 1, pageSize: 5 })
    const [datas, setdata]: any = useState([])
    const [options, setOptions] = useState()
    // 获取表单的值
    const onFinish = (values: any) => {
        // console.log(values)
        setparams({ ...params, page: 1, ...values })
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    // 分页
    const pachange = (page: any, pageSize: any) => {
        setparams({ ...params, page: page, pageSize: pageSize })
    }
    
    // 列表接口
    const [currPage,setP] = useState()
    const list = async () => {
        const res: any = await Lists(params)
        setP(res.current_page)
        total = res.total
        setdata(res.data)
    }
    useEffect(() => {
        list()
    }, [])
    useEffect(() => {
        list()
    }, [params])



    // 表格开始------------------
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection: TableRowSelection<DataType> = {
        selectedRowKeys,
        onChange: onSelectChange,
        selections: [
            Table.SELECTION_ALL,
            Table.SELECTION_INVERT,
            Table.SELECTION_NONE,
            {
                key: 'odd',
                text: '偶数',
                onSelect: changableRowKeys => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return false;
                        }
                        return true;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
            {
                key: 'even',
                text: '奇数',
                onSelect: changableRowKeys => {
                    let newSelectedRowKeys = [];
                    newSelectedRowKeys = changableRowKeys.filter((_, index) => {
                        if (index % 2 !== 0) {
                            return true;
                        }
                        return false;
                    });
                    setSelectedRowKeys(newSelectedRowKeys);
                },
            },
        ],
    };
    const toadd = () => {
        navigate('/table/add')
    }
    //   表格结束-----------------
    const [form] = Form.useForm();
    const onGenderChange = (value: string) => {
        switch (value) {
            case 'male':
                form.setFieldsValue({ note: 'Hi, man!' });
                return;
            case 'female':
                form.setFieldsValue({ note: 'Hi, lady!' });
                return;
            case 'other':
                form.setFieldsValue({ note: 'Hi there!' });
        }
    };
    // 级联联动
    const fieldNames = { label: 'name', value: 'id', children: 'son' }

    const nge: any = (value: string[]) => {
        console.log(value);
    };
    return (
        <div className='visitorsList' style={{ padding: '15px', backgroundColor: '#fff', overflowY: 'auto' }}>
            <div>
                <div className='forms'>
                    <Form
                        layout="inline"
                        name="basic"
                        labelCol={{ span: 0 }}
                        wrapperCol={{ span: 24 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            name="username"
                        >
                            <Input placeholder="请输入访客名称" className='fr' />
                        </Form.Item>
                        <Form.Item
                            name="mobile"
                        >
                            <Input placeholder="请输入手机号" className='fr' />
                        </Form.Item>
                        <Form.Item name="type">
                            <Select
                                placeholder="请选择人员类型"
                                onChange={onGenderChange}
                                allowClear
                                className='fr'
                            >
                                <Option value="male">male</Option>
                                <Option value="female">female</Option>
                                <Option value="other">other</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="is_send">
                            <Select
                                placeholder="是否离校"
                                onChange={onGenderChange}
                                allowClear
                                className='fr'
                            >
                                <Option value="male">male</Option>
                                <Option value="female">female</Option>
                                <Option value="other">other</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="gender">
                            <Select
                                placeholder="请选择审核状态"
                                onChange={onGenderChange}
                                allowClear
                                className='fr'
                            >
                                <Option value="male">male</Option>
                                <Option value="female">female</Option>
                                <Option value="other">other</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name="gender">
                            <Cascader placeholder="请选择" fieldNames={fieldNames} options={options} onChange={nge} />
                        </Form.Item>
                        <Space direction="vertical">
                            <DatePicker onChange={onChange} className='fr1' />
                        </Space>
                        <Space direction="vertical" style={{ marginTop: '18px' }}>
                            <DatePicker onChange={onChange} className='fr1' />
                        </Space>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" id='sel'>查询</Button>
                            <Button type="primary" id='add' onClick={toadd}>添加</Button>
                            <Button type="primary" id='ss'>批量审核</Button>
                            <Button type="primary" id='dd'>批量导出</Button>
                            <Button type="primary" id='ss'>批量导入</Button>
                            <Button type="primary" id='add'>批量删除</Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>
            {/* 表格 */}
            <div className='table' >
                <Table  rowKey='v_id' rowSelection={rowSelection} columns={columns} dataSource={datas} bordered={true} pagination={false} />
                <Pagination
                    current={currPage}
                    total={total}
                    showTotal={total => `总共 ${total} 条数据`}
                    defaultPageSize={5}
                    defaultCurrent={1}
                    onChange={pachange}
                />
            </div>
        </div>
    )
}
export default List